import { computed, defineComponent, h } from 'vue'
import parameterProcessing from '../Helpers/parameterprocessing'
import {
    BaseInput,
    BaseCascader,
    BaseColorPicker,
    BaseFilter,
    BaseRadio,
    BaseSelect,
    BaseSelectV2,
    BaseTimePicker,
    BaseCheckbox,
    BaseInputNumber,
    BaseSelectGroup,
    BaseDatePickerOne,
    BaseDatePickerTwo,
} from '../components'

const formTypeProcessing = defineComponent({
    name: 'FromTypeProcessing',
    props: {
        filterItem: {
            type: Object,
            default: () => ({})
        },
        filterElement: {
            type: [String, Number, Boolean, Date, Array],
            default: ''
        }
    },
    emits: ['get-val'],
    setup(props, context) {
        const element = computed(() => props.filterElement)
        const modeTypeChooseFn = (arr) => {
            const hData = () => {
                return {
                    value: element.value,
                    attributes: parameterProcessing(arr),
                    onPushVal: (val) => {
                        context.emit('get-val', val)
                    }
                }
            }
            const modeType = {
                input: () => h(BaseInput, hData()),
                cascader: () => h(BaseCascader, hData()),
                colorPicker: () => h(BaseColorPicker, hData()),
                filter: () => h(BaseFilter, hData()),
                radio: () => h(BaseRadio, hData()),
                select: () => h(BaseSelect, hData()),
                selectV2: () => h(BaseSelectV2, hData()),
                timePicker: () => h(BaseTimePicker, hData()),
                checkbox: () => h(BaseCheckbox, hData()),
                inputNumber: () => h(BaseInputNumber, hData()),
                selectGroup: () => h(BaseSelectGroup, hData()),
                datePickerOne: () => h(BaseDatePickerOne, hData()),
                datePickerTwo: () => h(BaseDatePickerTwo, hData()),
            }
            return modeType[
                arr.component ||
                'input' ||
                'cascader' ||
                'colorPicker' ||
                'filter' ||
                'radio' ||
                'select' ||
                'selectV2' ||
                'timePicker' ||
                'checkbox' ||
                'inputNumber' ||
                'selectGroup' ||
                'datePickerOne' ||
                'datePickerTwo'
            ]
        }
        return modeTypeChooseFn(props.filterItem)
    }
})

export default formTypeProcessing